<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web安全与防护技术 - 课程网站</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            line-height: 1.6;
            background-color: #f5f5f5;
        }
        
        header {
            background-color: #2c3e50;
            color: white;
            padding: 1rem 0;
            text-align: center;
        }
        
        nav {
            background-color: #34495e;
            padding: 1rem 0;
        }
        
        nav ul {
            list-style: none;
            display: flex;
            justify-content: center;
            gap: 2rem;
        }
        
        nav a {
            color: white;
            text-decoration: none;
            padding: 0.5rem 1rem;
            border-radius: 4px;
            transition: background-color 0.3s;
        }
        
        nav a:hover {
            background-color: #465c71;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 2rem;
        }
        
        .hero {
            background-color: white;
            padding: 3rem;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            margin-bottom: 2rem;
        }
        
        .features {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin-top: 2rem;
        }
        
        .feature-card {
            background-color: white;
            padding: 1.5rem;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        footer {
            background-color: #2c3e50;
            color: white;
            text-align: center;
            padding: 1rem 0;
            margin-top: 2rem;
        }
    </style>
</head>
<body>
    <header>
        <h1>Web安全与防护技术</h1>
        <p>2024-2025学年第2学期</p>
    </header>
    
    <nav>
        <ul>
            <li><a href="#home">首页</a></li>
            <li><a href="#syllabus">课程大纲</a></li>
            <li><a href="#resources">学习资源</a></li>
            <li><a href="#labs">实验指导</a></li>
            <li><a href="#contact">联系我们</a></li>
        </ul>
    </nav>
    
    <div class="container">
        <section class="hero">
            <h2>课程简介</h2>
            <p>《Web安全与防护技术》是一门面向信息安全专业学生的课程。本课程将系统地介绍Web安全领域的关键技术、常见威胁与防护方法，帮助学生建立网络安全意识，掌握实用的防护技能。</p>
        </section>
    </div>
    
    <footer>
        <p>© 2024 Web安全与防护技术课程 版权所有</p>
    </footer>
</body>
</html>